button {
	outline-style: none;
}

button, a.button, input[type='button'], input[type='submit'], .btn{

	/* Button Colors */
	--btn-color-bkg-hover: rgba(98, 0, 238, .1);
	--btn-color: rgb(98, 0, 238);
	--btn-color-focus: rgba(98, 0, 238, .8);
	--btn-color-active: rgba(98, 0, 238, .2);
	--btn-color-active-dark: rgba(98, 0, 238, .6);
	--btn-color-outline: #ddd;
	--btn-color-disabled-light: #fafafa;
	--btn-color-disabled: #aaa;
	--btn-color-disabled-dark: #999;	
	/* /Button Colors */

	display: inline-flex;
	
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	border: 1px solid transparent;
	border-radius: 3px;
	cursor: pointer;
	box-sizing: border-box;
	background: none;
	color: var(--btn-color);


	font-size: .875rem;
	line-height: 1.8rem;
	letter-spacing: .08929em;
	font-weight: 500;
	text-transform: uppercase;
	
	
	/*#region    Icon */
	c-ico, d-ico{
		fill: var(--btn-color);
		width: 1.5rem;
		height: 1.5rem;
	}

	&.medium, &.high {
		c-ico{
			fill: white;
		}
	}

	/*#endregion Icon */

	/*#region    Common Button States */
	&:hover:not(:disabled):not(.disabled){
		background: var(--btn-color-bkg-hover);
	}
	
	&:active:not(:disabled):not(.disabled){
		background: var(--btn-color-active);
		box-shadow: none;
	}	
	/*#endregion Common Button States */

	/* Note: 'a' tag doe snot have a disabled attribute/pseudo, so fall back on classes */
	&:disabled, &.disabled{
		color: var(--btn-color-disabled);
		cursor: default;
	}

	/*#region    Button Types */

	&.medium, &.high{
		background: var(--btn-color);
		color: white;

		&:disabled, &.disabled{
			background: var(--btn-color-disabled-light);
			color: var(--btn-color-disabled);
		}

		&:hover:not(:disabled):not(.disabled){
			background: var(--btn-color-focus);
		}

		&:active:not(:disabled):not(.disabled){
			background: var(--btn-color-active-dark);
		}
	}

	&.high{
		box-shadow: var(--elev-1-shadow);
		&:disabled, &.disabled{
			box-shadow: none;
		}
	}

	&.outlined{
		box-shadow: none;
		background: none;
		color: var(--btn-color);
		border: solid 1px var(--btn-color-outline);

		&:disabled, &.disabled{
			color: var(--btn-color-disabled);
		}		
	}		
	/*#endregion Button Types */

	&.sec{
		background: none;
		color: var(--clr-gray-900);
		border: 1px solid transparent;

		c-ico,d-ico{
			fill: white;
		}
		
		&:hover:not(:disabled):not(.disabled){
			background: white;
			border: 1px solid var(--clr-prime-800);
			color: var(--clr-prime-800);
		}
		&:active:not(:disabled):not(.disabled){
			border: 1px solid var(--clr-prime-800);
			color: var(--btn-color-disabled);
		} 

	}

	&.prim{
		@mixin elev-1{};
		background: var(--clr-prime);
		color: white;

		c-ico,d-ico{
			fill: white;
		}
		
		&:hover:not(:disabled):not(.disabled){
			background: var(--clr-prime-600);
		}
		&:active:not(:disabled):not(.disabled){
			@mixin elev-1{};
			background: var(--clr-prime-800);
			color: white;
		} 
		

	}

	&.default{
		@mixin elev-1{};
		background: var(--clr-gray-050);
		color: var(--clr-gray-700);
		border-color: var(--clr-gray-400);

		c-ico,d-ico{
			fill: var(--clr-gray-700);
		}
		
		&:hover:not(:disabled):not(.disabled){
			background: var(--clr-gray-200);
		}
		&:active:not(:disabled):not(.disabled){
			@mixin elev-1{};
			background: white;
			color: var(--clr-gray-600);
		} 
	}


	&.success{
		@mixin elev-1{};
		background: var(--clr-other-green);
		color: white;

		c-ico,d-ico{
			fill: white;
		}
		
		&:hover:not(:disabled):not(.disabled){
			background: var(--clr-other-green-light-100);
		}
		&:active:not(:disabled):not(.disabled){
			@mixin elev-1{};
			background: var(--clr-other-green-dark);
			color: white;
		} 
		

	}
}
